<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选题创编</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        .layui-form-checked[lay-skin=primary] i {
            border-color: #409eff !important;
            background-color: #409eff;
            color: #fff;
        }

        /* 改变layui选择框的背景颜色和字体颜色 */
        .layui-form-select dl dd.layui-this {
            background-color: #409eff;
            color: #dcdfe6;
        }

        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body>
    <!-- 导航面包屑 -->
    <div class="x-nav" style="border-bottom: 1px solid #e5e5e5;padding: 0 20px;line-height: 39px;height:39px">
        <span class="layui-breadcrumb" style="font-size: 6px!important;padding-left: 10px;color: #999;">
            <a href="#">首页</a>
            <a href="#">演示</a>
            <a><cite>导航元素</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm"
            style="line-height:1.6em;margin-top:3px;float:right;background-color: rgba(30, 159, 255, 0.76) !important;border-radius: 4px;"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    
    <form class="layui-form" style="margin-top: 30px;width: 1000px;" id="app" v-cloak>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>年级：</label>
            <div class="layui-input-block">
                <select id="levelName" lay-filter="levelName" lay-search required lay-verify="required">
                    <option value="">请选择</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>学科：</label>
            <div class="layui-input-block">
                <select id="subjectName" lay-filter="subjectName" lay-search required lay-verify="required">
                    <option value="">请选择</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>题干：</label>
            <div class="layui-input-block">
                <input type="text" id="title" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <label class="layui-form-label"><span style="color: red;">*</span>选项：</label>
        <div style="margin-left: 60px;">
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-weight: 600;">A</label>
                <div class="layui-input-block" style="width: 600px;">
                    <input type="text" id="questionA" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-weight: 600;">B</label>
                <div class="layui-input-block" style="width: 600px;">
                    <input type="text" id="questionB" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-weight: 600;">C</label>
                <div class="layui-input-block" style="width: 600px;">
                    <input type="text" id="questionC" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-weight: 600;">D</label>
                <div class="layui-input-block" style="width: 600px;">
                    <input type="text" id="questionD" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-weight: 600;">E</label>
                <div class="layui-input-block" style="width: 600px;">
                    <input type="text" id="questionE" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="margin-top:30px;">
            <label class="layui-form-label"><span style="color: red;">*</span>标答：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="correctAnswer" value="a" title="A" lay-skin="primary">
                <input type="checkbox" name="correctAnswer" value="b" title="B" lay-skin="primary">
                <input type="checkbox" name="correctAnswer" value="c" title="C" lay-skin="primary">
                <input type="checkbox" name="correctAnswer" value="d" title="D" lay-skin="primary">
                <input type="checkbox" name="correctAnswer" value="e" title="E" lay-skin="primary">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label"><span style="color: red;">*</span>解析：</label>
            <div class="layui-input-block">
                <textarea id="resolution" placeholder="请输入内容" class="layui-textarea" required
                    lay-verify="required"></textarea>
            </div>
        </div>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>分数：</label>
            <div class="layui-input-block">
                <select id="score" lay-filter="receiveUserName" lay-search required lay-verify="required">
                    <option value="">请选择</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                    <option value=6>6</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>难度：</label>
            <div id="test1"></div>
        </div>

        <div class="layui-form-item" style="margin-left: 110px;">
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="提交" @click="save"
                    style="border-radius: 5px;">
            </div>
            <div class="layui-inline">
                <input type="reset" class="layui-btn layui-btn-primary" value="重置" style="border-radius: 5px;">
            </div>
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="预览" @click="test"
                    style="border-radius: 5px;background-color: #13ce66;">
            </div>
        </div>

        <div id="show-test" style="width: 800px;padding: 30px;display: none;">
            <div style="width: 100%;">
                <span id="title2"></span>
            </div>
            <div style="margin-top: 30px;">
                <div style="margin-left: 30px;display: inline-block;">
                    A&nbsp;&nbsp;&nbsp;<span id="questionA2"></span>
                </div>
                <div style="margin-left: 30px;display: inline-block;">
                    B&nbsp;&nbsp;&nbsp;<span id="questionB2"></span>
                </div>
                <div style="margin-left: 30px;display: inline-block;">
                    C&nbsp;&nbsp;&nbsp;<span id="questionC2"></span>
                </div>
                <div style="margin-left: 30px;display: inline-block;">
                    D&nbsp;&nbsp;&nbsp;<span id="questionD2"></span>
                </div>
                <div style="margin-left: 30px;display: inline-block;">
                    E&nbsp;&nbsp;&nbsp;<span id="questionE2"></span>
                </div>
            </div>

        </div>

    </form>


    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="js/over/multiple_add.js"></script>

    <script>
        layui.use(['rate', 'form', 'layer'], function () {
            let rate = layui.rate;
            let form = layui.form;
            let layer = layui.layer;

            // 难度评分
            rate.render({
                elem: '#test1',
                value: 0,  // 初始值
                choose: function (value) {
                    app.difficult = value;
                }
            })


            // 年级名称下拉列表框监视
            form.on('select(levelName)', function (data) {
                //console.log(data.value); 得到被选中的值

                $("#subjectName option").each(function (i) {
                    if (i != 0) {
                        $(this).remove();
                    }
                })
                form.render();
                if (data.value == "") {
                    reture;
                }

                $.ajax({
                    url: 'http://localhost:8080/subject/selectByMore',
                    type: 'get',
                    data: { levelName: data.value },
                    success: function (vo) {
                        if (vo.code == 200) {

                            $.each(vo.data, function (i, s) {
                                $("#subjectName").append("<option value='" + s.subjectName + "'>" + s.subjectName + "</option>");
                            });

                            form.render();
                        }
                    }
                });


            });

        });
    </script>
</body>

</html>